<template>
   <div style="width:350px;height:250px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            data1:[
                {name:'交通',value:200},
                {name:'餐饮',value:1000},
                {name:'娱乐',value:500}
            ],
            data2:[
                {name:'公交',value:50},
                {name:'地铁',value:130},
                {name:'电动车',value:20},
                {name:'大餐',value:800},
                {name:'快餐',value:100},
                {name:'零食',value:100},
                {name:'打游戏',value:300},
                {name:'K歌',value:200}
            ]
        }
    },
    computed:{
        options(){
            return{
                series:[
                    {
                        type:'pie',
                        data:this.data1,
                        label:{
                            normal:{
                                position:'inner'
                            }
                        },
                        radius:['0%','55%'],
                    },
                    {
                        type:'pie',
                        data:this.data2,
                        radius:['60%','85%'],
                        
                    }
                ]
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }
}
</script>

<style>

</style>